<template>
  <div class="app-container content">
    <el-form size="small" label-width="50px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="年份">
            <el-date-picker v-model="date" type="year" placeholder="选择年">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="tableoperation" style="display: flex; justify-content: right">
      <print :disabled="dataList == 0" :title="title">
        <table
          style="width: 100%"
          border="1"
          cellspacing="0"
          cellpadding="0"
          align="center"
        >
          <thead>
            <tr>
              <td rowspan="2" align="center">职业类别</td>
              <td colspan="4" align="center">
                <div>集体剂量分布比</div>
                <div><i>$SR_E$</i></div>
              </td>
              <td colspan="4" align="center">
                <div>个人剂量人员分布比</div>
                <div><i>$NR_E$</i></div>
              </td>
            </tr>
            <tr>
              <td
                align="center"
                v-for="(item, index) in table"
                :key="'sr_' + index"
              >
                <i>$SR_{{ "{" + item + "}" }}$</i>
              </td>
              <td
                align="center"
                v-for="(item, index) in table"
                :key="'nr_' + index"
              >
                <i>$NR_{{ "{" + item + "}" }}$</i>
              </td>
            </tr>
          </thead>
          <tr v-for="(item, index) in dataList" :key="index">
            <td align="center">
              <dict-tag
                :value="item.occupationalClassification"
                :options="dict.type.occupational_classification"
              ></dict-tag>
            </td>
            <td
              v-for="(tdItem, tdIndex) in table"
              :key="'sr_' + tdIndex"
              align="center"
            >
              {{ item["sr" + tdItem] }}
            </td>
            <td
              v-for="(tdItem, tdIndex) in table"
              :key="'nr_' + tdIndex"
              align="center"
            >
              {{ item["nr" + tdItem] }}
            </td>
          </tr>
          <tr>
            <td align="center" v-for="(tItem, tIndex) in sums" :key="tIndex">
              {{ tItem }}
            </td>
          </tr>
        </table>
      </print>
    </div>
    <div
      v-if="title"
      style="
        margin: -25px 0 15px;
        font-size: 20px;
        font-weight: bold;
        width: 100%;
        text-align: center;
      "
    >
      {{ title }}
    </div>
    <el-table
      v-loading="loading"
      :max-height="height - 400 + 'px'"
      :data="dataList"
      show-summary
      :summary-method="summaryMethod"
    >
      <el-table-column
        label="职业类别"
        align="center"
        prop="occupationalClassification"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag
            :value="scope.row.occupationalClassification"
            :options="dict.type.occupational_classification"
          >
          </dict-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="entrustOrganizationName">
        <template slot="header">
          <div>集体剂量分布比</div>
          <div><i>$SR_E$</i></div>
        </template>
        <el-table-column
          align="center"
          :prop="'sr' + item"
          v-for="(item, index) in table"
          :key="index"
        >
          <template slot="header">
            <div v-html="'<i>$SR_{' + item + '}$</i>'"></div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="entrustOrganizationName">
        <template slot="header">
          <div>个人剂量人员分布比</div>
          <div><i>$NR_E$</i></div>
        </template>
        <el-table-column
          align="center"
          :prop="'nr' + item"
          v-for="(item, index) in table"
          :key="index"
        >
          <template slot="header">
            <div v-html="'<i>$NR_{' + item + '}$</i>'"></div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { distributionSummary } from "@/api/form/form";
export default {
  name: "distributiveRatio",
  data() {
    return {
      loading: false,
      dataList: [],
      table: [1, 5, 10, 15],
      // 视图高度
      height: document.documentElement.clientHeight,
      total: 0,
      queryParams: {
        year: null,
      },
      sums: [],
      title:
        "放射工作人员职业外照射个人监测集体剂量分布比、个人剂量人员分布比汇总表",
    };
  },
  dicts: ["occupational_classification"],
  created() {
    this.init();
    this.$nextTick(() => {
      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    });
  },
  computed: {
    date: {
      get() {
        return new Date(this.queryParams.year + "-01-01");
      },
      set(val) {
        console.log("nnfas", val);
        this.queryParams.year = val.getFullYear();
      },
    },
  },
  methods: {
    // 合计赋值
    summaryMethod(param) {
      const { columns, data } = param;
      const sums = [];
      // 以下是对小计和总计分别进行赋值
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        //将当前列的所有值存储到values中  注：非数字会返回NaN。
        const values = data.map((item) => Number(item[column.property]));
        let label = ["year"];
        //如果label包含当前column.property，则进行数据处理
        if (!label.includes(column.property)) {
          // 总计
          let allTotal = values.reduce((prev, curr) => {
            const value = Number(curr);
            // 如果是数字则进行累加
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          allTotal =
            Number.isFinite(allTotal) && !Number.isInteger(allTotal)
              ? allTotal.toFixed(2)
              : allTotal;
          sums[index] = allTotal;
        } else {
          sums[index] = "";
        }
      });
      this.sums = sums;
      return sums;
    },
    init() {
      this.queryParams.year = new Date().getFullYear();
      this.getList();
    },
    getList() {
      distributionSummary(this.queryParams.year).then((res) => {
        this.dataList = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
.el-table {
  overflow: visible !important;
}
</style>
